<template>
    <view class="card">
        <view class="helperName">
            {{ order.riderName }}
        </view>

        <div class="orderTop">
            <view class="userAvatar">
                <image :src="order.riderAvatarUrl" mode="aspectFill"></image>
            </view>

            <view class="orderName">
                <view class="name">{{ order.orderName }}</view>
                <view class="time">{{ order.createTime }}下单</view>
            </view>

            <view class="price">佣金￥ {{ order.price }}</view>
        </div>

        <view class="orderBottom">
            <view class="orderNo">订单编号：{{ order.orderNo }}</view>
            <view class="orderNo">客户昵称：{{ JSON.parse(order.additionalExtendData).targetData.targetName }}</view>
        </view>

        <view class="orderInofButton" @click="goInfo">订单详情</view>
    </view>
</template>

<script setup lang="ts">
import { defineOptions, withDefaults, defineProps } from 'vue';
defineOptions({
    name: 'orderItem'
});

type orderType = {
    riderName: string;
    orderName: string;
    price: string;
    createTime: string;
    orderNo: string;
    riderAvatarUrl: string;
    additionalExtendData: string;
};

const props = withDefaults(
    defineProps<{
        order: orderType;
    }>(),
    {
        order: null
    }
);

const goInfo = () => {
    uni.navigateTo({
        url: '/pages_home/orderInfo/orderInfo?id=' + props.order.orderNo
    });
};
</script>

<style lang="scss" scoped>
.card {
    padding: 24rpx;
    width: 100%;
    height: auto;
    background-color: #fff;
    border-radius: 16rpx;
    .helperName {
        font-size: 24rpx;
        color: #333333;
        width: 70%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .orderTop {
        margin-top: 24rpx;
        margin-bottom: 28rpx;
        display: flex;

        .userAvatar {
            width: 104rpx;
            height: 104rpx;
            border-radius: 8rpx;
            background: #999999;
            overflow: hidden;
            image {
                border-radius: 8rpx;
                width: 104rpx;
                height: 104rpx;
            }
        }
        .orderName {
            margin-left: 28rpx;
            margin-right: 22rpx;
            flex: 1;
            position: relative;
            .name {
                font-size: 24rpx;
                font-weight: normal;
                line-height: normal;
                letter-spacing: normal;
                color: #333333;
                width: 100px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
            }
            .time {
                position: absolute;
                bottom: 0;
                left: 0;
                font-size: 24rpx;
                color: #999999;
            }
        }
        .price {
            min-width: 198rpx;
            margin-top: 10rpx;
            font-size: 32rpx;
            text-align: right;
            color: #333333;
        }
    }

    .orderBottom {
        border-radius: 8rpx;
        background: #f2f3f5;
        width: 100%;
        padding: 22rpx 30rpx 16rpx;

        .orderNo {
            font-size: 24rpx;
            color: #333333;
            margin-top: 20rpx;
            &:first-child {
                margin: 0;
            }
        }
    }
    .orderInofButton {
        width: 172rpx;
        height: 62rpx;
        border-radius: 34rpx;
        background: #2c72ff;
        margin-top: 18rpx;
        font-size: 24rpx;
        line-height: 62rpx;
        text-align: center;
        color: #ffffff;
        margin-left: auto;
    }
}
</style>
